<template>
  <BasicModal v-bind="$attrs" @register="registerDrawer" showFooter :title="getTitle" width="50%">
    <BasicTable @register="registerTable" class="dict-table">
      <template #tableTitle>
        <a-button v-if="showAdd" type="primary" @click="handleCreate" class="mb-1">
          + 新增参数
        </a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                // icon: 'clarity:note-edit-line',
                label: '编辑',
                onClick: handleEdit.bind(null, record),
              },
              {
                // icon: 'ant-design:delete-outlined',
                label: '删除',
                // color: 'error',
                popConfirm: {
                  title: '是否确认删除',
                  placement: 'left',
                  confirm: handleDelete.bind(null, record),
                },
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { columnsItem } from './dict.data';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { getDictPageItemListApi, deleteDictItemApi } from '/@/api/admin/dict';

  export default defineComponent({
    name: 'PostDrawer',
    components: { BasicModal, BasicTable, TableAction },
    emits: ['editDictItem', 'register'],
    setup(_, { emit }) {
      const { createMessage } = useMessage();
      const getTitle = ref('');
      const dictId = ref();
      const dictType = ref();
      const showAdd = ref(true);

      const [registerTable, { setProps, reload }] = useTable({
        columns: columnsItem,
        bordered: true,
        resizeHeightOffset: 80,
        canResize: true,
        pagination: { pageSize: 50 },
        maxHeight: 400,
        actionColumn: {
          width: 120,
          title: '操作',
          dataIndex: 'action',
          // slots: { customRender: 'action' },
          fixed: 'right',
        },
        indexColumnProps: {
          width: 60,
          align: 'left',
        },
      });

      const [registerDrawer, { closeModal }] = useModalInner((data) => {
        if (data.record) {
          const { id, dictType: type, description, systemFlag } = data.record;
          getTitle.value = '字典项管理—' + description;
          dictId.value = id;
          dictType.value = type;
          // 系统类禁止添加
          showAdd.value = systemFlag !== '1';
        }
        setProps({ api: loadList });
        reload();
      });
      // setProps
      async function loadList(obj = {}) {
        const res = await getDictPageItemListApi({
          current: 1,
          size: 10,
          ...obj,
          dictId: dictId.value,
        });
        // setTableData(records);
        return res;
      }

      function handleEdit(record: Recordable) {
        closeModal();
        emit('editDictItem', record);
      }

      function handleCreate() {
        closeModal();
        emit('editDictItem', { dictId: dictId.value, dictType: dictType.value });
      }

      async function handleDelete(record: Recordable) {
        console.log(record);
        await deleteDictItemApi(record.id);
        createMessage.success('操作成功');
        reload();
      }
      // async function handleChange(v) {
      //   loadList({ current: v.current, size: v.pageSize });
      // }
      return {
        getTitle,
        registerDrawer,
        registerTable,
        handleEdit,
        handleDelete,
        handleCreate,
        showAdd,
      };
    },
  });
</script>
<style lang="less" scoped>
  .dict-table {
    :deep(.ant-table-wrapper) {
      margin: 0;

      // .ant-table-body {
      //   height: auto !important;
      // }
    }
  }
</style>
